<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<!-- 
	 angular
	 ng-xxx	 
	 wx:xxx
	
	 插值:
	  (双大括号) 的文本插值,
	  v-html 原始 HTML,
	  v-bind 指令作用在 HTML attribute
		
		`${xxx}`
		v-xxx
		v-指令:参数.修饰符.修饰符1.修饰符2="值"
		
		v-on:event="eventName"    <=>     @event="eventName"
		v-bind:attr="attrVal"    <=>     :attr="attrVal"
	 -->
	<div id="app">
		<h1 v-bind:[attr]="msg">{{ msg.repeat(2) }}</h1>
		<!-- <h1 v-once>{{ msg }}</h1> -->
	</div>
	
	<script src="vue.js"></script>
	<script>
		
		const app = new Vue({
			data: {
				msg: "Hello Vue 模板语法！",
				attr: "data-title"
			},
		}).$mount("#app")
	</script>
</body>
</html>